<!-- 来访登记页 -->
<template>
  <div style="margin: 20px;">
    <el-breadcrumb separator="/" style="line-height:35px">
      <el-breadcrumb-item><span style="color: #7A7A7A;">服务管理</span></el-breadcrumb-item>
      <el-breadcrumb-item><span style="color: #7A7A7A;">接待管理</span></el-breadcrumb-item>
      <el-breadcrumb-item><span style="color: #0468FF;font-weight: bold">来访登记</span></el-breadcrumb-item>
    </el-breadcrumb>
  </div>

  <!-- 搜索卡片 -->
  <el-card style="margin: 20px;height: 70px;border: 0" shadow="never">
    <el-form>
      <el-row :gutter="30">
        <el-col :span="6">
          <el-form-item label="来访人电话">
            <el-input placeholder="请输入来访人电话" v-model="searchForm.visitorPhone"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="来访人姓名">
            <el-input placeholder="请输入来访人姓名" v-model="searchForm.visitorName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="受访老人">
            <el-input placeholder="请输入受访老人姓名" v-model="searchForm.patientName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-button @click="resetSearch">重置</el-button>
            <el-button type="primary" @click="loadVisitor">查询</el-button>
            <el-button type="primary" style="margin-left: 30px;" @click="beforeAddVisitor">新建来访</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-card>

  <!-- 来访列表 -->
  <el-card style="margin:20px;border: 0" shadow="never">
    <el-table :data="currentTableData" height="550px"
              :row-style="{'height':'50px'}"
              :cell-style="{'color':'#000'}"
              :header-cell-style="{
                'background-color': '#f2f2f2',
                'color': '#000',
                'height':'50px'
              }">
      <el-table-column width="150" prop="patientName" label="受访老人" align="center"/>
      <el-table-column width="150" prop="visitDate" label="来访日期" align="center"/>
      <el-table-column width="150" prop="visitorName" label="来访人姓名" align="center"/>
      <el-table-column width="150" prop="certificate" label="来访人证件类型" align="center"/>
      <el-table-column width="200" prop="idNumber" label="来访人证件号" align="center"/>
      <el-table-column width="150" prop="visitorPhone" label="来访人电话" align="center"/>
      <el-table-column width="150" prop="relation" label="来访人关系" align="center"/>
      <el-table-column width="200" prop="createTime" label="登记时间" align="center"/>
      <el-table-column width="150" fixed="right" label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" @click="editVisitor(scope.row.id)">编辑</el-button>
          <el-button link type="danger" @click="deleteVisitor(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
        style="margin-top: 20px;margin-left: 5px;"
    />
  </el-card>

  <!-- 新增和编辑弹窗 -->
  <el-dialog v-model="dialogVisible"
             :before-close="handleClose"
             align-center center
             style="width: 950px;height: 470px;padding-top: 50px;">
    <template #header="{ close, titleId, titleClass }">
      <div>
        <span class="dialog-title">{{ dialogTitle }}</span>
      </div>
    </template>
    <el-form label-width="120px"
             style="margin-top: 20px;margin-bottom: 20px;">
      <el-row>
        <el-col :span="12">
          <el-form-item label="受访老人">
            <el-input placeholder="请输入受访老人姓名" v-model="dialogForm.patientName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="来访时间">
            <el-date-picker
                type="date"
                placeholder="请选择日期"
                value-format="YYYY-MM-DD HH:mm:ss"
                format="YYYY-MM-DD"
                v-model="dialogForm.visitDate"
                style="width: 300px;margin-left: 20px;"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="来访人">
            <el-input placeholder="请输入来访人姓名" v-model="dialogForm.visitorName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="来访人电话">
            <el-input placeholder="请输入来访人电话" v-model="dialogForm.visitorPhone"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="来访人证件类型">
            <el-select v-model="dialogForm.certificate" placeholder="请选择证件类型">
              <el-option label="居民身份证" value="居民身份证"></el-option>
              <el-option label="港澳通行证" value="港澳通行证"></el-option>
              <el-option label="台湾通行证" value="台湾通行证"></el-option>
              <el-option label="护照" value="护照"></el-option>
              <el-option label="军官证" value="军官证"></el-option>
              <el-option label="驾驶证" value="驾驶证"></el-option>
              <el-option label="其他" value="其他"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="来访人证件号">
            <el-input placeholder="请输入证件号" v-model="dialogForm.idNumber"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="来访人关系">
            <el-select v-model="dialogForm.relation" placeholder="请选择关系">
              <el-option label="子女" value="子女"></el-option>
              <el-option label="亲戚" value="亲戚"></el-option>
              <el-option label="朋友" value="朋友"></el-option>
              <el-option label="其他" value="其他"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose" style="margin-right: 40px;">取消</el-button>
      <el-button type="primary" @click="">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import {onMounted, ref} from "vue";

//搜索栏表单数据
const searchForm = ref({visitorPhone: '', visitorName: '', patientName: ''});
//弹窗
const dialogForm = ref({})
const dialogVisible = ref(false)
const dialogTitle = ref('新增来访')
const handleClose = () => {
  dialogVisible.value = false;
  dialogForm.value = {};
}
//表格数据
const tableData = ref([]);       //原始数据
const currentTableData = ref([]) // 当前页显示的数据
const currentPage = ref(1)       // 当前页码
const pageSize = ref(10)         // 每页条数

//加载表格数据
const loadVisitor = () => {
  for (let i = 0; i < 15; i++) {
    tableData.value.push({
      patientName: '刘姥姥',
      visitDate: '2018-06-06',
      visitorName: '张丫丫',
      certificate: '居民身份证',
      idNumber: '613012332053123568',
      visitorPhone: '15600000000',
      relation: '子女',
      createTime: '2018-06-05 16:20:30'
    })
  }
}
onMounted(() => {
  loadVisitor()
})

// 获取数据（示例）
const fetchData = async () => {
  // 这里替换为你的API请求
  // dataTable.value = await api.getData();
  updateCurrentData();
}

// 更新当前页数据
const updateCurrentData = () => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  currentTableData.value = tableData.value.slice(start, end)
}

// 每页条数变化
const handleSizeChange = (val) => {
  pageSize.value = val
  updateCurrentData()
}

// 页码变化
const handleCurrentChange = (val) => {
  currentPage.value = val
  updateCurrentData()
}

// 生命周期钩子
onMounted(() => {
  fetchData()
})

//重置搜索栏数据
const resetSearch = () => {
  searchForm.value = {visitorPhone: '', visitorName: '', patientName: ''};
  loadVisitor();
}
//点击新增接待按钮执行的方法
const beforeAddVisitor = () => {
  dialogTitle.value = '新增来访'
  dialogVisible.value = true;
}
//点击编辑按钮执行的方法
const editVisitor = (id) => {
  dialogTitle.value = '编辑'
  dialogVisible.value = true;
}
//点击删除按钮执行的方法
const deleteVisitor = (id) => {

}
</script>

<style scoped>
.dialog-title {
  font-size: 22px;
  font-weight: bold;
  color: #000;
}
.el-form .el-input{
  width: 300px;
  margin-left: 20px;
}
.el-form .el-select{
  width: 300px;
  margin-left: 20px;
}
.el-dialog .el-form-item {
  margin: 15px 0;
  --el-text-color-regular: #000;
}
</style>